<template>
	<view>
		<scroll-view scroll-y="true" v-if="show">
			<view class="header-title">问卷标题</view>
			<view class="beizhu">问卷备注部分在此显示问卷备注部分在此显示问卷备注部分在此显示问卷备注部分在此显示。
			</view>
			<view class="main">
				<checkbox-group @change="checkboxChange">
					<view class="main-item" v-for="(item,index) in list" :key="index">
						<view class="item-top flex">
							<view class="left">
								<span>*</span>
								<text>{{index+1}}.{{item.ti}}</text>
							</view>
							<view class="right">
								<label>
									<checkbox :value="item.id" :checked="item.checked" color="#1F9FFB" />
								</label>
							</view>
						</view>
						<view v-if="item.pid!=3">
							<view class="item-bottom" v-for="(item,indexs) in item.di" :key="index">
								<view class="bottoms flex">
									<!-- <radio style="transform:scale(0.7,0.7)" value="2" color="#1F9FFB" /> -->
									<span></span>
									<text>{{item.wen}}</text>
								</view>
							</view>
						</view>
						<view v-if="item.pid==3">
							<view class="item-bottom">
								<view class="bottoms flex">
									<input />
								</view>
							</view>
						</view>
					</view>
				</checkbox-group>
			</view>
		</scroll-view>
		<scroll-view v-else style="margin-top:15rpx;">
			<view class="main">
				<view class="main-item" v-for="(item,index) in list" :key="index">
					<view v-if="item.checked==true">
						<view class="item-top flex">
							<view class="left">
								<span>*</span>
								<text>{{index+1}}.{{item.ti}}</text>
							</view>
							<view class="right">
								<image :src="imgurl+'del.png'" @tap="del(item.id)"></image>
							</view>
						</view>
						<view v-if="item.pid!=3">
							<view class="item-bottom" v-for="(item,indexs) in item.di" :key="index">
								<view class="bottoms flex">
									<!-- <radio style="transform:scale(0.7,0.7)" value="2" color="#1F9FFB" /> -->
									<span></span>
									<text>{{item.wen}}</text>
								</view>
							</view>
						</view>
						<view v-if="item.pid==3">
							<view class="item-bottom">
								<view class="bottoms flex">
									<input />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="footer flex">
			<view class="footer-left" @tap="Look">
				<span>查看已选</span>
				<text>({{num}})</text>
			</view>
			<view class="footer-right" @tap="save">完成选题</view>
		</view>
	</view>
</template>

<script>
	import api from "@/common/api.js";
	import {
		baseURL
	} from "@/common/http.js";
	import app from "../../../App.vue"
	export default {
		data() {
			return {
				imgurl: "",
				num: 0,
				show: true,
				list: [],
				lists: [],
				wenid: '',
				id: '',
				valueid: '',
				valuelist: []
			};
		},
		methods: {
			Look() {
				if (this.num == 0) {
					this.show = true
					uni.showModal({
						confirmText: "知道了",
						content: "请添加题目",
						showCancel: false,
						confirmColor: "#209FFB"
					})
				} else {
					this.show === true ? this.show = false : this.show = true
				}
			},
			checkboxChange(e) {
				let ids = e
				this.valueid = e.detail.value;
				let values = e.detail.value;
				this.num = values.length
				for (let i = 0; i < this.list.length; i++) {
					console.log(typeof(this.list[i].id).toString())
					if (values.includes((this.list[i].id).toString())) {
						this.$set(this.list[i], 'checked', true)
					} else {
						this.$set(this.list[i], 'checked', false)
					}
				}
				console.log(e, this.list)
			},
			del(id) {
				let ids = id
				this.list.forEach((item, index) => {
					if (ids == item.id) {
						item.checked = false
						this.num--
					}
				})
				if (this.num == 0) {
					this.show = true
				}
			},
			save() {
				this.valueid.forEach((item, index) => {
					let data = {
						api: 'wenudan',
						id: item
					}
					api.look(data).then(res => {
						console.log(res)
						if (res.code == 200) {
							let datas = {
								api: 'wenti',
								wen: res.date.ti,
								xuan: res.date.xuan,
								wenid: this.id,
								data: res.date.da,
								yan: res.date.yan,
								pid: res.date.pid,
								zuishao: res.date.zuishao,
								zuiduo: res.date.zuiduo,
								orde: ''
							}
							api.look(datas).then(res => {
								if (app.globalData.flag == 1) {
									uni.navigateTo({
										url: '../../editDiaocha/editDiaocha?wenid=' + this.id
									})
								} else if (app.globalData.flag == 2) {
									uni.navigateTo({
										url: '../../createForm/editForm/editForm?wenid=' + this.id
									})
								} else {
									uni.navigateTo({
										url: '../../createVote/editVote/editVote?wenid=' + this.id
									})
								}
							})
						}
					}).catch(err => {
						console.log(err)
					})
				})
			}
		},
		onShareAppMessage(options) {
			let shareObj = {
				success: (res) => {
					if (res.errMsg == 'shareAppMessage:ok') {
						uni.showToast({
							title: '分享成功',
							icon: 'success',
							duration: 1500
						})
					}
				},
				fail: () => {
					if (res.errMsg == 'shareAppMessage:fail cancel') {
						uni.showToast({
							title: '取消分享',
							icon: 'none',
							duration: 2000
						})
					} else if (res.errMsg == 'shareAppMessage:fail') {
						// 转发失败，其中 detail message 为详细失败信息
					}
				},
				complete: () => {
					// 转发结束之后的回调（转发成不成功都会执行）
				}
			}
		},
		onLoad(options) {
			let that = this
			that.id = options.ids
			console.log(options)
			that.wenid = options.wenid
			this.imgurl = app.globalData.imgurls
			let datas = {
				api: 'tables',
				wenid: that.wenid
			}
			api.look(datas).then(res => {
				if(res.code == 200) {
					this.list = res.date
				}
			}).catch(err => {
				console.log(err)
			})
			let arr = this.list
			let newArr = arr.map(item => {
				item.show = false
				return item
			})
			this.list = newArr
		},
	}
</script>

<style lang="scss">
	page {
		background: #F0F0F0;
		font-weight: 500rpx;
		font-family: PingFang SC;
	}

	.header-title {
		color: #209FFB;
		font-size: 36rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-weight: bold;
	}

	.beizhu {
		color: #666;
		font-size: 24rpx;
		width: 690rpx;
		line-height: 30rpx;
		margin: 0 auto;
	}

	.main-item {
		width: 690rpx;
		margin: 0 auto;
		background: #fff;

		.item-top {
			justify-content: space-between;
			color: #333;
			font-size: 30rpx;
			background: #F0F0F0;
			padding: 10rpx 0;

			span {
				color: #ff0000;
			}

			.right {
				image {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.item-bottom {
			margin: 10rpx 0;

			.bottoms {
				height: 75rpx;
				line-height: 75rpx;
				border-radius: 10rpx;

				span {
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					border: 1rpx solid #DFDFDF;
					background: #fff;
					display: inline-block;
					margin: 0 10rpx;
				}
			}
		}
	}

	.footer {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 30rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;

		.footer-left {
			width: 30%;
			color: #333;
			background: #fff;
			text-align: center;

			text {
				color: #1F9FFB;
			}
		}

		.footer-right {
			width: 70%;
			text-align: center;
			background: #1F9FFB;
			color: #fff;
		}
	}

	checkbox .wx-checkbox-input {
		background: #F0F0F0;
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background: #1F9FFB
	}

	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		color: #ffffff;
	}
</style>
